<template>
    <div>
        <r-search :searchForm="searchForm" :searchData="searchData" />
        <div class="pw100 flex_aj mb20">
            <div class="mbox bg_1">
                <p>入账总金额</p>
                <p>{{MoneyData.insum}}元</p>
            </div>
            <div class="mbox bg_2">
                <p>出账总金额</p>
                <p>{{MoneyData.outsum}}元</p>
            </div>
        </div>
        <r-search :searchForm="searchForm2" :searchHandle="searchHandle" :searchData="searchData2" />
        <r-table :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>

    </div>
</template>
<script>
export default {
    data() {
        return {
            MoneyData: {
                insum: '',
                outsum: ''
            },
            searchData: {
                yam: ''
            },
            searchForm: [
                {
                    type: 'dateMonth',
                    prop: 'yam',
                    change: e => this.dateChange(e)
                }
            ],
            searchData2: {
                orderId: '',
                name: '',
                orderType: '',
                etime: '',
            },
            searchForm2: [
                {
                    type: 'input',
                    prop: 'orderId',
                    placeholder: '订单编号',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '交易对象',
                    width: 150
                },
                {
                    type: 'select',
                    prop: 'orderType',
                    placeholder: '交易类型',
                    width: 150,
                    options: [
                        {
                            label: '生鲜柜订单',
                            value: '1',
                        },
                        {
                            label: '自提柜订单',
                            value: '2',
                        },
                        {
                            label: '送货上门订单',
                            value: '3'
                        },
                        {
                            label: '售袋订单',
                            value: '4',
                        },
                        {
                            label: '售卡订单',
                            value: '5',
                        },
                        {
                            label: 'IC卡充值订单',
                            value: '6'
                        },
                        {
                            label: '退款',
                            value: '7',
                        },
                        {
                            label: '提现',
                            value: '8',
                        },
                    ]
                },
                {
                    type: 'date',
                    prop: 'etime',
                    placeholder: '交易时间',
                    width: 170
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init()
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset2()
                },
                {
                    label: "导出Excel",
                    icon: 'el-icon-download',
                    type: "success",
                    loading: false,
                    handle: (that) => this.handleDownload(),
                },
            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '订单编号',
                    prop: 'orderId',
                    // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                },
                {
                    label: '交易类型',
                    prop: 'orderType',
                    formatter: e => e.orderType == 1 ? '生鲜柜订单' : e.orderType == 2 ? '自提柜订单' : e.orderType == 3 ? '送货上门订单' : e.orderType == 4 ? '售袋订单' : e.orderType == 5 ? '售卡订单' : e.orderType == 6 ? 'C卡充值订单' : e.orderType == 7 ? '退款' : e.orderType == 8 ? '提现' : ''
                },
                {
                    label: '交易对象',
                    prop: 'name'
                },
                {
                    label: '交易金额',
                    prop: "bonus",
                    formatter: e => e.bonusType == 1 ? '-' + e.bonus : e.bonusType == 2 ? '+' + e.bonus : ''
                },
                {
                    label: '交易方式',
                    prop: 'type',
                    formatter: e => e.type == 1 ? '未知'
                      : e.type == 2 ? '微信公众号支付'
                        : e.type == 3 ? '微信公众号免密支付'
                          : e.type == 4 ? '微信人脸识别支付'
                            : e.type == 5 ? 'IC卡支付'
                            : e.type == 8 ? '余额支付'
                              : e.type == 6 ? '支付宝支付' : ''
                },
                {
                    label: '交易时间',
                    prop: 'orderTime',
                    width: 160,
                    formatter: e => this.getDeta(+new Date(e.orderTime.replace(/T/g, ' ')))
                },
            ],
            tablePage: { limit: 10, page: 1, total: 0 },
        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            this.tablePage.offset = this.tablePage.page
            let param = { ...this.tablePage, ...this.searchData2, ...this.searchData }
            let res = await this.api.getbonus(param)
            if (res) {
                this.tableData = res.data.list
                this.tablePage.total = res.data.total
            }
            let resin = await this.api.bonusin()
            let resout = await this.api.bonusout()
            if (resin) {
                this.MoneyData.insum = resin.data.inSum
            }
            if (resout) {
                this.MoneyData.outsum = resout.data.outSum == 0 ? '0' : resout.data.outSum
                console.log(this.MoneyData);
            }
        },
        //日期变更触发
        dateChange(e) {
            this.init()
        },
        //搜索
        elFormSubmit() {
            console.log('22')
        },
        searchFromReset2() {
            this.searchData2 = {
                orderId: '',
                name: '',
                orderType: '',
                etime: '',
            }
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                // if (j === 'connectedStatus') {
                //     return v[j] == 1 ? "在线" : "离线"
                // } else if (j === 'status') {
                //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "未激活"
                // } else {
                return v[j]
                // }
            }))
        },
    }
};
</script>
<style scoped lang='scss'>
.mbox {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  min-width: 200px;
  p:first-child {
    margin-bottom: 20px;
  }
}
.bg_1 {
  background-color: rgba(0, 153, 204, 1);
}
.bg_2 {
  background-color: rgba(102, 102, 204, 1);
}
</style>
